<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    document.compatMode:获取当前浏览器采用的渲染方式。主要是浏览器的模式，有两个：BackCompat，CSS1Compat。其中前者是怪异模式，后者是标准模式。
</div>
<code>


IE：

对于没有doctype声明的页面，使用  document.body.scrollTop 或 document.documentElement.scrollTop；

对于有doctype声明的页面，则使用 document.documentElement.scrollTop；

Chrome、Firefox：

对于没有doctype声明的页面，使用  document.body.scrollTop 来获取 scrollTop高度 ；

对于有doctype声明的页面，则使用 document.documentElement.scrollTop；

Safari:

safari 有自己获取scrollTop的函数 ： window.pageYOffset ；
</code>
</body>
<script>
    /**
     * IE默认是BackCompat模式，Gecko内核的浏览器只在table中图片层上不同，可以认为CSS1Compat标准模式document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
     　　当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
     　　浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
     　　一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：
     */
    if (document.compatMode === "BackCompat")
    {
        cWidth = document.body.clientWidth;
        cHeight = document.body.clientHeight;
        sWidth = document.body.scrollWidth;
        sHeight = document.body.scrollHeight;
        sLeft = document.body.scrollLeft;
        sTop = document.body.scrollTop;
    }
    else
    {
        //document.compatMode == \"CSS1Compat\"
        cWidth = document.documentElement.clientWidth;
        cHeight = document.documentElement.clientHeight;
        sWidth = document.documentElement.scrollWidth;
        sHeight = document.documentElement.scrollHeight;
        sLeft = document.documentElement.scrollLeft === 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
        sTop = document.documentElement.scrollTop === 0 ? document.body.scrollTop : document.documentElement.scrollTop;
    }

    //或者
    let scrollTop = document.documentElement.scrollTop === 0 ? document.body.scrollTop : document.documentElement.scrollTop
</script>
</html>